<template>
	<view class="globSerach">
		<view class="typeSearch">
			<view class="search">
			  <view class="iconBg"></view>
			  <input class="searchInput"  placeholder="请输入搜索内容" v-model="searchValue" @focus="focusChange" />
			  <view class="iconXX" v-if="searchValue" @click.stop="handelClear"></view>
			</view>
			<button class="btnSelect" @click.stop="handelSearch">取消</button>
		</view>
		<OldSearch v-if="isShowOld"></OldSearch>
		<NewSearch v-if="isShowNew" :searchResult="searchResult"></NewSearch>
		<Result :test="test" :flashSendUser="flashSendUser" :searchValue="searchValue"></Result>
	</view>
</template>

<script>
	import OldSearch from './components/oldSearch.vue'
	import NewSearch from './components/newSerach.vue'
	import Result from './components/result.vue'
	import {apiGetSearchZp, apiGetSearchUser} from '../../../api/globSearch.js'
	export default {
		components:{
			NewSearch,
			OldSearch,
			Result
		},
		data() {
			return {
				isShowOld: true,
				isShowNew: false,
				test: true,
				// 搜索框输入值
				searchValue: '',
				// 用户下拉刷新用户列表
				flashSendUser: 0,
				// 手动搜索结果：type = 1:用户,type = 0:视频
				searchResult: []
			}
		},
		onLoad() {
			var self = this
			self.oldData = uni.getStorageSync('serachOldJson') || []
		},
		methods: {
			handelSearch(){
				uni.navigateBack({
					data: 1
				})
			},
			handelClear() {
				var self = this
				self.searchValue = ''
				self.isShowNew = false
				self.isShowOld = true
				self.test = false
				// 异步还原test
				setTimeout(() => {
					self.test = true
				}, 100)
			},
			focusChange() {
				var self = this
				self.isShowNew = true
				self.isShowOld = false
				if(!self.searchValue.trim()) {
					self.searchResult = []
				}
			},
			// 检索用户
			searchUser() {
				var self = this
				apiGetSearchUser({
					nickname: self.searchValue,
					page: 1,
					page_size: 3
				}).then( r => {
					self.searchResult = []
					r.data.data.map(function(v, i){
						self.searchResult.push({
							type: 1,
							id: v.user_id,
							title: v.nickname
						})
					})
				})
			},
			// 检索视频
			searchVideo() {
				var self = this
				apiGetSearchZp({
					title: self.searchValue,
					page: 1,
					page_size: 3
				}).then( r => {
					self.searchResult = []
					r.data.data.map(function(v, i){
						self.searchResult.push({
							type: 0,
							id: v.id,
							title: v.title
						})
					})
					
				})
			},
		},
		// 下拉刷新
		onPullDownRefresh() {
			var self = this
			self.flashSendUser = 1
			setTimeout(function () {
				self.flashSendUser = 0
				uni.stopPullDownRefresh();
			}, 2000);
		},
		watch: {
			searchValue() {
				var self = this
				if (!self.searchValue.trim()) {
					// 还原页面
					self.isShowNew = false
					self.isShowOld = true
					self.test = false
					// 异步还原test
					setTimeout(() => {
						self.test = true
					}, 100)
					return
				} else {
					self.isShowNew = true
					self.isShowOld = false
				}
				self.searchResult = []
				self.searchUser()
				self.searchVideo()
			},
			
			'$store.getters.clickSearchSHow': {
				handler(val) {
					var self = this
					self.isShowNew = false
					self.isShowOld = false
					// 向输入框赋值
					self.searchValue = val.value.title
					setTimeout(() => {
						self.isShowNew = false
						self.isShowOld = false
					}, 100)
				},
				deep: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.globSerach {
			position: relative;
			width: 100%;
			height: 100%;
			.typeSearch {
				width: 100%;
				height: 74rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
				.search {
					height: 100%;
					width: 75%;
					display: flex;
					justify-content: flex-start;
					background-color: #1C1B2B;
					margin-left: 20.11rpx;
				}
				.iconBg {
					width: 15%;
					height: 100%;
					border-radius: 9.41rpx;
					background-image: url(./icon/search.png);
					background-repeat: no-repeat;
					background-position: 18rpx 26rpx;
					background-size: 32.94rpx;
					
				}
				.iconXX {
					width: 15%;
					background-image: url(./icon/clear.png);
					background-repeat: no-repeat;
					background-position: center;
					background-size: 32.94rpx;
				}
				.searchInput {
					margin-top: 5.88rpx;
					height: 90%;
					width: 70%;
				}
				.btnSelect{
					width: 141.17rpx;
					height: 100%;
					line-height: 74rpx;
					text-align: center;
					color: #FFD700;
					font-size: 32rpx;
					background-color: black;
				}
			}
	}
</style>
